<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>实现ToDoList留言板</h2>
        <!-- 列表 -->
        <div>
            <ul>
                <li v-for="(item,index) in list">
                    <!-- 对象通过点语法取到title -->
                    <p>{{item.title}}</p>
                    <button v-on:click="deleteOne(index)">删除</button>
                    <button v-on:click = "change(item,index)">修改</button>
                </li>
            </ul>
        </div>
        <hr>
        <!-- 添加 -->
        <div>
            <input type="text" v-model="str">
            <button v-on:click = "add">添加</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            // 数据写在data里
            data:{
                list:[
                {title:"复习二阶段"},
                {title:"背二阶段面试题"},
                {title:"预习Vue"}
                ],
                // 别忘记
                str:''
            },
            // 方法
            methods:{
                // 添加
                add(){
                    // 不为空才可以添加添加
                    if(this.str){
                        this.list.push({
                        title: this.str
                        })
                    }else{
                        alert('不可以添加空项');
                    }
                    // str置为空
                    this.str = '';
                },

                // 删除
                deleteOne(index){
                    this.list.splice(index,1);
                },
                // 修改
                change(item,index){
                    // 获取弹出框的内容
                    // window.prompt("提示内容"，"输入框的内容") 只写一个参数默认为提示内容
                    let value = window.prompt(index,item.title);
                    // 点击取消value为null，点击确定value为输入框的内容
                    console.log(value);
                    // 为空或者和原来相等都不能输入
                    if(value && value != item.title){
                        item.title = value;
                        // 将list的内容替换
                        // this.list.splice(index,1,item);
                    }
                }
            }
        })
    </script>
</body>
</html>